{include file='common/header'}
{include file='common/nav'}

<link rel="stylesheet" href="{:HOME_ROOT}/css/login.css"/>

<div id="container">

    <div class="login">
        <div class="content">
            <div class="form-ctr">
                <input type="text" placeholder="用户名" v-model.trim="account" />
            </div>
            <div class="form-ctr">
                <input type="text" placeholder="昵称" v-model.trim="nickname" />
            </div>
            <div class="form-ctr">
                <input type="password" placeholder="密码" v-model.trim="password" />
            </div>
            <div class="form-ctr">
                <input type="password" placeholder="确认密码" v-model.trim="re_pass" />
            </div>
            <div class="verify form-ctr">
                <img :src="verifyShow" v-on:click="randVerify" />
                <input type="text" placeholder="验证码" v-model.trim="code" />
            </div>
            <div class="clear form-ctr">
                <button class="button" v-on:click="register">注册</button>
            </div>
        </div>
    </div>

    {include file="common/loading"}
    {include file="common/dialog"}

</div>

{include file="common/copyright"}
{include file="common/footer"}

<script language="JavaScript">

    Loaded(function () {

        VUEOPT.data.verifyShow = "{:url('Common/verify')}";
        VUEOPT.data.verify = "{:url('Common/verify')}";
        VUEOPT.data.account = "";
        VUEOPT.data.nickname = "";
        VUEOPT.data.password = "";
        VUEOPT.data.re_pass = "";
        VUEOPT.data.code = "";

        VUEOPT.methods.randVerify = function(e){
            this.verifyShow = this.verify + '?' + Math.random();
        };
        VUEOPT.methods.register = function(e){
            var that = this;
            if(this.account == ''){
                return this.dialog = {msg: '请填写用户名！'};
            }
            if(this.nickname == ''){
                return this.dialog = {msg: '请填写昵称！'};
            }
            if(this.password == ''){
                return this.dialog = {msg: '请填写密码！'};
            }
            if(this.password == this.re_pass){
                that.loading = 1;
                post("{:url('Member/_register')}", buildData(this, ['account', 'nickname', 'password', 'code']), function(res){
                    that.loading = 0;
                    if(res.status == 1){
                        that.dialog = {msg: '恭喜，注册成功！', btn: [{cb: function(){
                            window.location.href = "{:url('Member/center')}";
                        }}]};
                    }else{
                        that.dialog = {msg: res.msg};
                        that.verifyShow = that.verify + '?' + Math.random();
                    }
                });
            }else{
                return this.dialog = {msg: '两次密码不相同！'};
            }
        };

        var vm = new Vue(VUEOPT);
    });

</script>